<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师课后服务工作量统计系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#f97316',
                        neutral: '#f3f4f6',
                        dark: '#1e293b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .btn-hover {
                @apply transition-all duration-300 transform hover:scale-105;
            }
            .animate-fadeIn {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                0% { opacity: 0; transform: translateY(10px); }
                100% { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="flex flex-col h-screen">
        <!-- 顶部导航 -->
        <header class="bg-primary text-white shadow-lg">
            <div class="container mx-auto px-4 py-4 flex justify-between items-center">
                <div class="flex items-center space-x-3">
                    <i class="fa fa-graduation-cap text-2xl"></i>
                    <h1 class="text-xl md:text-2xl font-bold">教师课后服务工作量统计系统</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="exportBtn" class="bg-white text-primary px-4 py-2 rounded-md font-medium btn-hover flex items-center">
                        <i class="fa fa-download mr-2"></i>导出数据
                    </button>
                    <div class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                            <span class="hidden md:inline">管理员</span>
                            <i class="fa fa-chevron-down text-xs"></i>
                        </button>
                        <div id="userMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden z-10">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人设置</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">系统设置</a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="flex-grow container mx-auto px-4 py-6">
            <!-- 控制面板 -->
            <div class="bg-white rounded-xl shadow-lg p-6 mb-6 animate-fadeIn">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="col-span-1 md:col-span-2">
                        <div class="flex flex-col sm:flex-row gap-4">
                            <div class="relative flex-grow">
                                <input type="text" id="dateFilter" placeholder="选择日期范围" 
                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <i class="fa fa-calendar absolute right-3 top-3 text-gray-400"></i>
                            </div>
                            <div class="flex-grow">
                                <select id="subjectFilter" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary appearance-none bg-white">
                                    <option value="">所有学科</option>
                                    <option value="语文">语文</option>
                                    <option value="数学">数学</option>
                                    <option value="英语">英语</option>
                                    <option value="物理">物理</option>
                                    <option value="化学">化学</option>
                                    <option value="生物">生物</option>
                                    <option value="政治">政治</option>
                                    <option value="历史">历史</option>
                                    <option value="地理">地理</option>
                                    <option value="体育">体育</option>
                                    <option value="音乐">音乐</option>
                                    <option value="美术">美术</option>
                                    <option value="信息技术">信息技术</option>
                                </select>
                                <i class="fa fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i>
                            </div>
                            <div class="relative flex-grow max-w-xs">
                                <input type="text" id="nameSearch" placeholder="按姓名搜索" 
                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                <i class="fa fa-search absolute right-3 top-3 text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-end">
                        <button id="addRecordBtn" class="bg-secondary text-white px-6 py-3 rounded-lg font-medium btn-hover flex items-center">
                            <i class="fa fa-plus-circle mr-2"></i>添加记录
                        </button>
                    </div>
                </div>
            </div>

            <!-- 统计概览 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                <div class="bg-white rounded-xl shadow-lg p-6 animate-fadeIn" style="animation-delay: 0.1s;">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 font-medium">总教师数</p>
                            <h3 class="text-3xl font-bold mt-1" id="totalTeachers">32</h3>
                        </div>
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="fa fa-users text-primary text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center text-sm">
                        <span class="text-green-500 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 2.5%
                        </span>
                        <span class="text-gray-500 ml-2">较上月</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 animate-fadeIn" style="animation-delay: 0.2s;">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 font-medium">总服务次数</p>
                            <h3 class="text-3xl font-bold mt-1" id="totalServices">187</h3>
                        </div>
                        <div class="bg-green-100 p-3 rounded-lg">
                            <i class="fa fa-calendar-check-o text-green-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center text-sm">
                        <span class="text-green-500 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 12.3%
                        </span>
                        <span class="text-gray-500 ml-2">较上月</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 animate-fadeIn" style="animation-delay: 0.3s;">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 font-medium">总工作量</p>
                            <h3 class="text-3xl font-bold mt-1" id="totalWorkload">112.4</h3>
                        </div>
                        <div class="bg-purple-100 p-3 rounded-lg">
                            <i class="fa fa-bar-chart text-purple-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center text-sm">
                        <span class="text-green-500 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 8.7%
                        </span>
                        <span class="text-gray-500 ml-2">较上月</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 animate-fadeIn" style="animation-delay: 0.4s;">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 font-medium">人均工作量</p>
                            <h3 class="text-3xl font-bold mt-1" id="avgWorkload">3.5</h3>
                        </div>
                        <div class="bg-yellow-100 p-3 rounded-lg">
                            <i class="fa fa-user-circle-o text-yellow-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center text-sm">
                        <span class="text-red-500 flex items-center">
                            <i class="fa fa-arrow-down mr-1"></i> 1.2%
                        </span>
                        <span class="text-gray-500 ml-2">较上月</span>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-2 animate-fadeIn">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-bold">工作量趋势</h2>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-md">周</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">月</button>
                            <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">年</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="workloadTrendChart"></canvas>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 animate-fadeIn">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-bold">服务类型分布</h2>
                        <button class="text-primary text-sm">查看详情</button>
                    </div>
                    <div class="h-80">
                        <canvas id="serviceTypeChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 教师工作量表格 -->
            <div class="bg-white rounded-xl shadow-lg p-6 animate-fadeIn">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-lg font-bold">教师工作量明细</h2>
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <select id="sortSelect" class="px-4 py-2 pr-8 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary appearance-none bg-white">
                                <option value="workload-desc">工作量 (降序)</option>
                                <option value="workload-asc">工作量 (升序)</option>
                                <option value="name-asc">姓名 (升序)</option>
                                <option value="name-desc">姓名 (降序)</option>
                                <option value="date-desc">日期 (最近)</option>
                                <option value="date-asc">日期 (最早)</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i>
                        </div>
                        <button id="refreshBtn" class="text-gray-600 hover:text-primary transition-colors">
                            <i class="fa fa-refresh"></i>
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">教师</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学科</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">服务类型</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">节数</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工作量</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="teacherWorkloadTable">
                            <!-- 表格数据将通过JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-between items-center mt-6">
                    <div class="text-sm text-gray-600">
                        显示 <span id="showingRange">1-10</span> 条，共 <span id="totalRecords">42</span> 条记录
                    </div>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50 disabled:opacity-50" disabled>
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <button class="px-3 py-1 bg-primary text-white rounded-md">1</button>
                        <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50">2</button>
                        <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50">3</button>
                        <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-dark text-white py-6">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <p class="text-sm text-gray-400">© 2025 教师课后服务工作量统计系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-question-circle"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-file-text-o"></i> 使用手册
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-envelope-o"></i> 联系我们
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 添加记录模态框 -->
    <div id="addRecordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-fadeIn">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">添加课后服务记录</h3>
                    <button id="closeModalBtn" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form id="addRecordForm">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="teacherName" class="block text-sm font-medium text-gray-700 mb-1">教师姓名</label>
                            <input type="text" id="teacherName" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入教师姓名" required>
                        </div>
                        <div>
                            <label for="teacherSubject" class="block text-sm font-medium text-gray-700 mb-1">所属学科</label>
                            <select id="teacherSubject" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                                <option value="">请选择学科</option>
                                <option value="语文">语文</option>
                                <option value="数学">数学</option>
                                <option value="英语">英语</option>
                                <option value="物理">物理</option>
                                <option value="化学">化学</option>
                                <option value="生物">生物</option>
                                <option value="政治">政治</option>
                                <option value="历史">历史</option>
                                <option value="地理">地理</option>
                                <option value="体育">体育</option>
                                <option value="音乐">音乐</option>
                                <option value="美术">美术</option>
                                <option value="信息技术">信息技术</option>
                            </select>
                        </div>
                        <div>
                            <label for="serviceDate" class="block text-sm font-medium text-gray-700 mb-1">服务日期</label>
                            <input type="date" id="serviceDate" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                        </div>
                        <div>
                            <label for="serviceType" class="block text-sm font-medium text-gray-700 mb-1">服务类型</label>
                            <select id="serviceType" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                                <option value="">请选择服务类型</option>
                                <option value="早读">早读</option>
                                <option value="午休">午休</option>
                                <option value="课后服务">课后服务</option>
                                <option value="晚自习1">晚自习1</option>
                                <option value="晚自习2">晚自习2</option>
                            </select>
                        </div>
                        <div>
                            <label for="serviceCount" class="block text-sm font-medium text-gray-700 mb-1">服务节数</label>
                            <input type="number" id="serviceCount" min="1" max="10" value="1" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                        </div>
                        <div>
                            <label for="workloadValue" class="block text-sm font-medium text-gray-700 mb-1">工作量值</label>
                            <input type="number" id="workloadValue" step="0.1" min="0.1" max="10" value="1.0" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                        </div>
                    </div>
                    <div class="mb-6">
                        <label for="serviceNotes" class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                        <textarea id="serviceNotes" rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入备注信息（选填）"></textarea>
                    </div>
                    <div class="flex justify-end space-x-4">
                        <button type="button" id="cancelAddBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                        <button type="submit" class="px-6 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors btn-hover">保存记录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑记录模态框 -->
    <div id="editRecordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-fadeIn">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">编辑课后服务记录</h3>
                    <button id="closeEditModalBtn" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form id="editRecordForm">
                    <input type="hidden" id="editRecordId">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="editTeacherName" class="block text-sm font-medium text-gray-700 mb-1">教师姓名</label>
                            <input type="text" id="editTeacherName" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入教师姓名" required>
                        </div>
                        <div>
                            <label for="editTeacherSubject" class="block text-sm font-medium text-gray-700 mb-1">所属学科</label>
                            <select id="editTeacherSubject" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                                <option value="">请选择学科</option>
                                <option value="语文">语文</option>
                                <option value="数学">数学</option>
                                <option value="英语">英语</option>
                                <option value="物理">物理</option>
                                <option value="化学">化学</option>
                                <option value="生物">生物</option>
                                <option value="政治">政治</option>
                                <option value="历史">历史</option>
                                <option value="地理">地理</option>
                                <option value="体育">体育</option>
                                <option value="音乐">音乐</option>
                                <option value="美术">美术</option>
                                <option value="信息技术">信息技术</option>
                            </select>
                        </div>
                        <div>
                            <label for="editServiceDate" class="block text-sm font-medium text-gray-700 mb-1">服务日期</label>
                            <input type="date" id="editServiceDate" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                        </div>
                        <div>
                            <label for="editServiceType" class="block text-sm font-medium text-gray-700 mb-1">服务类型</label>
                            <select id="editServiceType" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                                <option value="">请选择服务类型</option>
                                <option value="早读">早读</option>
                                <option value="午休">午休</option>
                                <option value="课后服务">课后服务</option>
                                <option value="晚自习1">晚自习1</option>
                                <option value="晚自习2">晚自习2</option>
                            </select>
                        </div>
                        <div>
                            <label for="editServiceCount" class="block text-sm font-medium text-gray-700 mb-1">服务节数</label>
                            <input type="number" id="editServiceCount" min="1" max="10" value="1" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                        </div>
                        <div>
                            <label for="editWorkloadValue" class="block text-sm font-medium text-gray-700 mb-1">工作量值</label>
                            <input type="number" id="editWorkloadValue" step="0.1" min="0.1" max="10" value="1.0" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                        </div>
                    </div>
                    <div class="mb-6">
                        <label for="editServiceNotes" class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                        <textarea id="editServiceNotes" rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入备注信息（选填）"></textarea>
                    </div>
                    <div class="flex justify-end space-x-4">
                        <button type="button" id="cancelEditBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                        <button type="submit" class="px-6 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors btn-hover">保存修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="deleteConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md animate-fadeIn">
            <div class="p-6">
                <div class="text-center mb-4">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
                        <i class="fa fa-exclamation-triangle text-red-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900">确认删除</h3>
                    <p class="text-gray-600 mt-2">你确定要删除这条课后服务记录吗？此操作不可撤销。</p>
                </div>
                <div class="flex justify-center space-x-4 mt-6">
                    <button id="cancelDeleteBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button id="confirmDeleteBtn" class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors btn-hover">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        // 模拟数据
        const mockData = [
            { id: 1, teacher: '张三', subject: '语文', type: '早读', date: '2025-05-20', count: 1, workload: 0.6, notes: '正常服务' },
            { id: 2, teacher: '李四', subject: '数学', type: '课后服务', date: '2025-05-20', count: 2, workload: 2.0, notes: '' },
            { id: 3, teacher: '王五', subject: '英语', type: '午休', date: '2025-05-20', count: 1, workload: 0.4, notes: '' },
            { id: 4, teacher: '赵六', subject: '物理', type: '晚自习1', date: '2025-05-20', count: 1, workload: 1.0, notes: '学生表现良好' },
            { id: 5, teacher: '钱七', subject: '化学', type: '晚自习2', date: '2025-05-20', count: 1, workload: 1.0, notes: '' },
            { id: 6, teacher: '张三', subject: '语文', type: '课后服务', date: '2025-05-21', count: 1, workload: 1.0, notes: '' },
            { id: 7, teacher: '李四', subject: '数学', type: '早读', date: '2025-05-21', count: 1, workload: 0.6, notes: '' },
            { id: 8, teacher: '王五', subject: '英语', type: '晚自习1', date: '2025-05-21', count: 1, workload: 1.0, notes: '' },
            { id: 9, teacher: '赵六', subject: '物理', type: '课后服务', date: '2025-05-21', count: 2, workload: 2.0, notes: '讲解重点题型' },
            { id: 10, teacher: '钱七', subject: '化学', type: '午休', date: '2025-05-21', count: 1, workload: 0.4, notes: '' }
        ];

        // 服务类型对应的颜色
        const serviceTypeColors = {
            '早读': '#3b82f6',
            '午休': '#10b981',
            '课后服务': '#f97316',
            '晚自习1': '#8b5cf6',
            '晚自习2': '#ec4899'
        };

        // 服务类型对应的工作量默认值
        const serviceTypeDefaultWorkload = {
            '早读': 0.6,
            '午休': 0.4,
            '课后服务': 1.0,
            '晚自习1': 1.0,
            '晚自习2': 1.0
        };

        // 当前编辑的记录ID
        let currentEditRecordId = null;
        let currentDeleteRecordId = null;

        // DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化表格数据
            renderWorkloadTable(mockData);
            
            // 初始化图表
            initCharts();
            
            // 设置当前日期
            document.getElementById('dateFilter').value = '2025-05-01 - 2025-05-31';
            document.getElementById('serviceDate').value = new Date().toISOString().split('T')[0];
            
            // 事件监听器
            document.getElementById('addRecordBtn').addEventListener('click', openAddRecordModal);
            document.getElementById('closeModalBtn').addEventListener('click', closeAddRecordModal);
            document.getElementById('cancelAddBtn').addEventListener('click', closeAddRecordModal);
            document.getElementById('addRecordForm').addEventListener('submit', handleAddRecord);
            
            document.getElementById('closeEditModalBtn').addEventListener('click', closeEditRecordModal);
            document.getElementById('cancelEditBtn').addEventListener('click', closeEditRecordModal);
            document.getElementById('editRecordForm').addEventListener('submit', handleEditRecord);
            
            document.getElementById('cancelDeleteBtn').addEventListener('click', closeDeleteConfirmModal);
            document.getElementById('confirmDeleteBtn').addEventListener('click', handleDeleteRecord);
            
            document.getElementById('serviceType').addEventListener('change', function() {
                const serviceType = this.value;
                if (serviceType && serviceTypeDefaultWorkload[serviceType]) {
                    document.getElementById('workloadValue').value = serviceTypeDefaultWorkload[serviceType];
                }
            });
            
            document.getElementById('editServiceType').addEventListener('change', function() {
                const serviceType = this.value;
                if (serviceType && serviceTypeDefaultWorkload[serviceType]) {
                    document.getElementById('editWorkloadValue').value = serviceTypeDefaultWorkload[serviceType];
                }
            });
            
            document.getElementById('userMenuBtn').addEventListener('click', function() {
                document.getElementById('userMenu').classList.toggle('hidden');
            });
            
            // 点击页面其他地方关闭用户菜单
            document.addEventListener('click', function(event) {
                const userMenuBtn = document.getElementById('userMenuBtn');
                const userMenu = document.getElementById('userMenu');
                
                if (!userMenuBtn.contains(event.target) && !userMenu.contains(event.target)) {
                    userMenu.classList.add('hidden');
                }
            });
            
            // 搜索功能
            document.getElementById('nameSearch').addEventListener('input', function() {
                const searchText = this.value.toLowerCase();
                const filteredData = mockData.filter(item => 
                    item.teacher.toLowerCase().includes(searchText)
                );
                renderWorkloadTable(filteredData);
            });
            
            // 学科筛选
            document.getElementById('subjectFilter').addEventListener('change', function() {
                const subject = this.value;
                if (!subject) {
                    renderWorkloadTable(mockData);
                    return;
                }
                
                const filteredData = mockData.filter(item => item.subject === subject);
                renderWorkloadTable(filteredData);
            });
            
            // 排序功能
            document.getElementById('sortSelect').addEventListener('change', function() {
                const sortBy = this.value;
                let sortedData = [...mockData];
                
                switch(sortBy) {
                    case 'workload-desc':
                        sortedData.sort((a, b) => b.workload - a.workload);
                        break;
                    case 'workload-asc':
                        sortedData.sort((a, b) => a.workload - b.workload);
                        break;
                    case 'name-asc':
                        sortedData.sort((a, b) => a.teacher.localeCompare(b.teacher));
                        break;
                    case 'name-desc':
                        sortedData.sort((a, b) => b.teacher.localeCompare(a.teacher));
                        break;
                    case 'date-desc':
                        sortedData.sort((a, b) => new Date(b.date) - new Date(a.date));
                        break;
                    case 'date-asc':
                        sortedData.sort((a, b) => new Date(a.date) - new Date(b.date));
                        break;
                }
                
                renderWorkloadTable(sortedData);
            });
            
            // 刷新按钮
            document.getElementById('refreshBtn').addEventListener('click', function() {
                this.classList.add('animate-spin');
                setTimeout(() => {
                    this.classList.remove('animate-spin');
                    renderWorkloadTable(mockData);
                    showNotification('数据已刷新', 'success');
                }, 800);
            });
            
            // 导出按钮
            document.getElementById('exportBtn').addEventListener('click', function() {
                showNotification('数据导出中...', 'info');
                setTimeout(() => {
                    showNotification('数据导出成功', 'success');
                }, 1500);
            });
        });

        // 渲染工作量表格
        function renderWorkloadTable(data) {
            const tableBody = document.getElementById('teacherWorkloadTable');
            tableBody.innerHTML = '';
            
            if (data.length === 0) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                            <div class="flex flex-col items-center">
                                <i class="fa fa-search text-4xl mb-3 text-gray-300"></i>
                                <p>没有找到匹配的记录</p>
                            </div>
                        </td>
                    </tr>
                `;
                return;
            }
            
            data.forEach(item => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors';
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10">
                                <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/${Math.floor(Math.random() * 100)}/40/40" alt="${item.teacher}">
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">${item.teacher}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">${item.subject}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="h-2.5 w-2.5 rounded-full mr-2" style="background-color: ${serviceTypeColors[item.type]}"></div>
                            ${item.type}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.date}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.count}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm font-medium text-gray-900">${item.workload}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button class="text-primary hover:text-primary/80 mr-3 edit-btn" data-id="${item.id}">
                            <i class="fa fa-pencil"></i> 编辑
                        </button>
                        <button class="text-red-600 hover:text-red-800 delete-btn" data-id="${item.id}">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                `;
                tableBody.appendChild(row);
            });
            
            // 添加编辑和删除按钮事件监听器
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = parseInt(this.getAttribute('data-id'));
                    openEditRecordModal(recordId);
                });
            });
            
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = parseInt(this.getAttribute('data-id'));
                    openDeleteConfirmModal(recordId);
                });
            });
            
            // 更新显示范围和总数
            document.getElementById('showingRange').textContent = `1-${data.length}`;
            document.getElementById('totalRecords').textContent = data.length;
        }

        // 初始化图表
        function initCharts() {
            // 工作量趋势图表
            const trendCtx = document.getElementById('workloadTrendChart').getContext('2d');
            new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: ['5/1', '5/2', '5/3', '5/4', '5/5', '5/6', '5/7'],
                    datasets: [{
                        label: '总工作量',
                        data: [12.5, 15.3, 14.8, 16.2, 18.7, 17.5, 19.2],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
            
            // 服务类型分布图表
            const typeCtx = document.getElementById('serviceTypeChart').getContext('2d');
            new Chart(typeCtx, {
                type: 'doughnut',
                data: {
                    labels: ['早读', '午休', '课后服务', '晚自习1', '晚自习2'],
                    datasets: [{
                        data: [25, 15, 30, 15, 15],
                        backgroundColor: [
                            '#3b82f6',
                            '#10b981',
                            '#f97316',
                            '#8b5cf6',
                            '#ec4899'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    },
                    cutout: '70%'
                }
            });
        }

        // 打开添加记录模态框
        function openAddRecordModal() {
            document.getElementById('addRecordModal').classList.remove('hidden');
            document.getElementById('teacherName').focus();
        }

        // 关闭添加记录模态框
        function closeAddRecordModal() {
            document.getElementById('addRecordModal').classList.add('hidden');
            document.getElementById('addRecordForm').reset();
        }

        // 处理添加记录
        function handleAddRecord(e) {
            e.preventDefault();
            
            const form = e.target;
            const teacherName = form.elements.teacherName.value;
            const teacherSubject = form.elements.teacherSubject.value;
            const serviceDate = form.elements.serviceDate.value;
            const serviceType = form.elements.serviceType.value;
            const serviceCount = parseInt(form.elements.serviceCount.value);
            const workloadValue = parseFloat(form.elements.workloadValue.value);
            const serviceNotes = form.elements.serviceNotes.value;
            
            // 创建新记录
            const newRecord = {
                id: mockData.length + 1,
                teacher: teacherName,
                subject: teacherSubject,
                type: serviceType,
                date: serviceDate,
                count: serviceCount,
                workload: workloadValue,
                notes: serviceNotes
            };
            
            // 添加到模拟数据
            mockData.unshift(newRecord);
            
            // 更新表格
            renderWorkloadTable(mockData);
            
            // 关闭模态框
            closeAddRecordModal();
            
            // 显示成功通知
            showNotification('记录添加成功', 'success');
        }

        // 打开编辑记录模态框
        function openEditRecordModal(recordId) {
            const record = mockData.find(item => item.id === recordId);
            if (!record) return;
            
            currentEditRecordId = recordId;
            
            const form = document.getElementById('editRecordForm');
            form.elements.editRecordId.value = record.id;
            form.elements.editTeacherName.value = record.teacher;
            form.elements.editTeacherSubject.value = record.subject;
            form.elements.editServiceDate.value = record.date;
            form.elements.editServiceType.value = record.type;
            form.elements.editServiceCount.value = record.count;
            form.elements.editWorkloadValue.value = record.workload;
            form.elements.editServiceNotes.value = record.notes;
            
            document.getElementById('editRecordModal').classList.remove('hidden');
            document.getElementById('editTeacherName').focus();
        }

        // 关闭编辑记录模态框
        function closeEditRecordModal() {
            document.getElementById('editRecordModal').classList.add('hidden');
            currentEditRecordId = null;
        }

        // 处理编辑记录
        function handleEditRecord(e) {
            e.preventDefault();
            
            if (currentEditRecordId === null) return;
            
            const form = e.target;
            const recordId = parseInt(form.elements.editRecordId.value);
            const teacherName = form.elements.editTeacherName.value;
            const teacherSubject = form.elements.editTeacherSubject.value;
            const serviceDate = form.elements.editServiceDate.value;
            const serviceType = form.elements.editServiceType.value;
            const serviceCount = parseInt(form.elements.editServiceCount.value);
            const workloadValue = parseFloat(form.elements.editWorkloadValue.value);
            const serviceNotes = form.elements.editServiceNotes.value;
            
            // 更新记录
            const recordIndex = mockData.findIndex(item => item.id === recordId);
            if (recordIndex !== -1) {
                mockData[recordIndex] = {
                    ...mockData[recordIndex],
                    teacher: teacherName,
                    subject: teacherSubject,
                    type: serviceType,
                    date: serviceDate,
                    count: serviceCount,
                    workload: workloadValue,
                    notes: serviceNotes
                };
                
                // 更新表格
                renderWorkloadTable(mockData);
                
                // 关闭模态框
                closeEditRecordModal();
                
                // 显示成功通知
                showNotification('记录更新成功', 'success');
            }
        }

        // 打开删除确认模态框
        function openDeleteConfirmModal(recordId) {
            currentDeleteRecordId = recordId;
            document.getElementById('deleteConfirmModal').classList.remove('hidden');
        }

        // 关闭删除确认模态框
        function closeDeleteConfirmModal() {
            document.getElementById('deleteConfirmModal').classList.add('hidden');
            currentDeleteRecordId = null;
        }

        // 处理删除记录
        function handleDeleteRecord() {
            if (currentDeleteRecordId === null) return;
            
            // 删除记录
            const recordIndex = mockData.findIndex(item => item.id === currentDeleteRecordId);
            if (recordIndex !== -1) {
                mockData.splice(recordIndex, 1);
                
                // 更新表格
                renderWorkloadTable(mockData);
                
                // 关闭模态框
                closeDeleteConfirmModal();
                
                // 显示成功通知
                showNotification('记录已删除', 'success');
            }
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg flex items-center z-50 transform transition-all duration-300 translate-x-full opacity-0`;
            
            // 设置通知类型样式
            let iconClass, bgColor;
            switch(type) {
                case 'success':
                    iconClass = 'fa-check-circle';
                    bgColor = 'bg-green-500';
                    break;
                case 'error':
                    iconClass = 'fa-exclamation-circle';
                    bgColor = 'bg-red-500';
                    break;
                case 'warning':
                    iconClass = 'fa-exclamation-triangle';
                    bgColor = 'bg-yellow-500';
                    break;
                case 'info':
                default:
                    iconClass = 'fa-info-circle';
                    bgColor = 'bg-blue-500';
                    break;
            }
            
            notification.classList.add(bgColor, 'text-white');
            
            // 设置通知内容
            notification.innerHTML = `
                <i class="fa ${iconClass} mr-2"></i>
                <span>${message}</span>
            `;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.classList.remove('translate-x-full', 'opacity-0');
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                notification.classList.add('translate-x-full', 'opacity-0');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
    </script>
</body>
</html>
    